import React,{useState} from 'react'
import './zagly.css'
import {Table} from 'antd';
import { Pagination } from 'antd';
import { Select, Space,Checkbox,Input,Button,Modal,Switch  } from 'antd';
export default function ZQGLY() {
  let data=[
    {
      key:1,
      name:'北京西天取经科技有限公司',
      cont1:'俊豪中央广场A座',
      peo:'张三',
      phone:'+8618888888888',
      com:'xx@qq.com',
    },
    {
      key:2,
      name:'华采科技(北京)有限公司',
      cont1:'俊豪中央广场B座',
      peo:'李四',
      phone:'+8618888888888',
      com:'xx@qq.com',
    },
    {
      key:3,
      name:'百度网络科技有限公司',
      cont1:'俊豪中央广场C座',
      peo:'王五',
      phone:'+8618888888888',
      com:'xx@qq.com',
    }
  ]
  let col=[
    {
        title: '客户名称',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '租住楼宇',
        dataIndex: 'cont1',
        key: 'cont1',
    },
    {
      title: '联系人',
      dataIndex: 'peo',
      key: 'peo',
    },
    {
      title: '联系人手机号',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '联系人邮箱',
      dataIndex: 'com',
      key: 'com',
    },
    {
        title:'操作',
        dataIndex:'action',
        //参数 record 指的是当前整行数据对象
        render(_,record){
        return    <div>
                <p>设置管理员</p>
            </div>
        }
    }
];
const [isModalOpen, setIsModalOpen] = useState(false);
const showModal = () => {
    setIsModalOpen(true);
};
const handleOk = () => {
    setIsModalOpen(false);
};
const handleCancel = () => {
    setIsModalOpen(false);
};

const handleChange = (value) => {
    console.log(`selected ${value}`);
  };
  return (
    <>
      <h2>租期管理员</h2>
      <div className="cont">
        <div className="inp"><input type="text" placeholder='请输入客户名称'/></div>
        <div className="txt">
            <p>管理员姓名或手机号</p>
            <input type="text"/>
        </div>
        <div className="zqzt">
          <p>租期状态</p>
          <div className="box">
            <div>
              <input type="checkbox"/>
              <span>已设置</span>
            </div>
            <div>
              <input type="checkbox"/>
              <span>未设置</span>
            </div>
          </div>
        </div>
        <Button>查询</Button>
        <Button onClick={showModal}>重置</Button>
      </div>
      <div className="cont1">
        <Table 
          dataSource={data}
          columns={col}
          // pagination={{
          //     position:['bottomLeft']
          // }}
        />
        <Pagination size="small" total={50} showSizeChanger showQuickJumper />
      </div>


      <Modal title="设置租期管理员" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} cancelText={'取消'} okText={'保存'}>
        <div className="addNew">
            <div className='floor'>
              <div className='qylxr-name'>
                <p><span>* </span> 管理员姓名</p>
                <Input type="text" placeholder='请输入联系人姓名' value=""/>
              </div>
              <div className='qylxr-phone'>
                <p><span class="m">*</span>管理员手机号</p>
                <div>
                      <Select
                          defaultValue="中国+86"
                          style={{
                              width: 73,
                              height:36
                          }}
                          onChange={handleChange}
                      />
                      <Input placeholder='请输入'/>
                </div>
              </div>
            </div>
            <div className='qylxr-footer'>
            <div >
                <span>管理员邮箱</span>
                <Input placeholder='请输入联系人邮箱'/>
            </div>
            <div>
                <span>证件号</span>
                <Input placeholder='请输入联系人职务'/>
            </div>
            </div>
        </div>
      </Modal>
    </>
  )
}
